import { Form, Radio ,Image, Button} from "antd"
import { title } from "process"
import { FC } from "react"
import style from "./index.module.css"

// 引入自定义icon图标
import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_3608375_wvvinqktye.js'// 在 iconfont.cn 上生成
})

const PayType = () => {
    return (
        <div className={style.paytype}>
            <div className={style.note}>
                <span className={style.prompt}>！注:该支付方式启用并不能正常使用，需要开通支付功能才能使用相应的支付方式<span style={{margin:'20px',color:'black'}}>x</span></span>
            </div>

            <div className={style.typetitle}>
                <h3 className={style.title}>支付方式</h3>
            </div>

            <div className={style.typemain}>

                <div className={style.type}>
                    <div className={style.logo}>
                        <MyIcon type="icon-zhifubao" />
                        <Image></Image>
                    </div>
                    <div className={style.typeitem}>支付宝《中国》网络技术有限公司是国内领先的第三方支付平台,致力于提供“简单、安全、快速”的支付解决方案</div>
                    <div className={[style.typeitem,style.radio].join(' ')}>
                        <Radio.Group>
                            <Radio value="apple"> 启用 </Radio>
                            <Radio value="pear"> 关闭 </Radio>
                        </Radio.Group>
                    </div>
                    <div className={[style.btn,style.typeitem].join(' ')}>
                        <Button style={{background:'skyblue'}} icon={<MyIcon type="icon-shezhi" style={{margin:'0'}}/>}>设置</Button>
                        <Button style={{background:'pink'}} icon={<MyIcon type="icon-shanchu"/>}>删除</Button>
                    </div>
                </div>

                <div className={style.type}>
                    <div className={style.logo}>
                        <MyIcon type="icon-weixinzhifu" />
                        <Image></Image>
                    </div>
                    <div className={style.typeitem}>支付宝《中国》网络技术有限公司是国内领先的第三方支付平台,致力于提供“简单、安全、快速”的支付解决方案</div>
                    <div className={[style.typeitem,style.radio].join(' ')}>
                        <Radio.Group>
                            <Radio value="apple"> 启用 </Radio>
                            <Radio value="pear"> 关闭 </Radio>
                        </Radio.Group>
                    </div>
                    <div className={[style.btn,style.typeitem].join(' ')}>
                        <Button style={{background:'skyblue'}} icon={<MyIcon type="icon-shezhi" style={{margin:'0'}}/>}>设置</Button>
                        <Button style={{background:'pink'}} icon={<MyIcon type="icon-shanchu"/>}>删除</Button>
                    </div>
                </div>

                <div className={style.type}>
                    <div className={style.logo}>
                        <MyIcon type="icon-zhifupingtai-yinlian" />
                        <Image></Image>
                    </div>
                    <div className={style.typeitem}>支付宝《中国》网络技术有限公司是国内领先的第三方支付平台,致力于提供“简单、安全、快速”的支付解决方案</div>
                    <div className={[style.typeitem,style.radio].join(' ')}>
                        <Radio.Group>
                            <Radio value="apple"> 启用 </Radio>
                            <Radio value="pear"> 关闭 </Radio>
                        </Radio.Group>
                    </div>
                    <div className={[style.btn,style.typeitem].join(' ')}>
                        <Button style={{background:'skyblue'}} icon={<MyIcon type="icon-shezhi" style={{margin:'0'}}/>}>设置</Button>
                        <Button style={{background:'pink'}} icon={<MyIcon type="icon-shanchu"/>}>删除</Button>
                    </div>
                </div>

                <div className={style.type}>
                    <div className={style.logo}>
                        <MyIcon type="icon-zhifupingtai-yinlian" />
                        <Image></Image>
                    </div>

                    <div className={style.typeitem}>支付宝《中国》网络技术有限公司是国内领先的第三方支付平台,致力于提供“简单、安全、快速”的支付解决方案</div>
                    
                    <div className={[style.typeitem,style.radio].join(' ')}>
                        <Radio.Group>
                            <Radio value="apple"> 启用 </Radio>
                            <Radio value="pear"> 关闭 </Radio>
                        </Radio.Group>
                    </div>

                    <div className={[style.btn,style.typeitem].join(' ')}>
                        <Button style={{background:'skyblue'}} icon={<MyIcon type="icon-shezhi" style={{margin:'0'}}/>}>设置</Button>
                        <Button style={{background:'pink'}} icon={<MyIcon type="icon-shanchu"/>}>删除</Button>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default PayType